<template>
  <div class="gis-layer-management">
    <!--    <div class="module-disabled" title="开发中"></div>-->
    <div class="header">
      <div class="header-title">
        <span class="type-icon-name">
          <span class="header-name">属性</span>
        </span>
      </div>
    </div>
    <!-- 图层列表 -->
    <div class="attribute-list four-scroll-y">
      <div
        v-for="(attribute, index) in layerTableColumns"
        :key="index"
        class="layer-attribute-item"
      >
        <div class="attribute-info">
          <span class="attribute-type-icon">
            <a-icon-font :type="attributeTypeIcon[attribute.desc]" />
          </span>
          <span class="attribute-name" :title="attribute.name">
            {{ attribute.name }}
          </span>
        </div>
        <div class="attribute-add">
          <a-tooltip placement="top" :mouse-enter-delay="1">
            <template slot="title">
              <span>添加到属性标记</span>
            </template>
            <div @click="addToTag(attribute)">
              <a-icon-font type="iconzengjia" />
            </div>
          </a-tooltip>
        </div>
        <div class="attribute-menu">
          <a-dropdown :trigger="['click']">
            <div class="ant-dropdown-icon">
              <a-icon-font type="iconicon-beifen" />
            </div>
            <a-menu
              slot="overlay"
              size="small"
              @click="($event) => menuAction($event, attribute)"
            >
              <a-menu-item key="view-source-data">查看源数据</a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </div>
      <div v-if="layerTableColumns.length === 0" class="attribute-empty">
        <img alt="" :src="publicPath + '/img/empty.svg'" />
        <div>暂无属性</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * gis 属性
 */
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import GisStore from '@/store/modules/gis'
import { publicPath } from '@/api/constants'

enum AttributeType {
  VARCHAR = 'varchar',
  DATE = 'date',
  INT = 'int',
  DECIMAL = 'decimal',
  TEXT = 'text',
  JSON = 'json',
  ARRAY = 'array',
}

@Component({
  components: {},
})
export default class LayerAttribute extends Vue {
  // 项目id
  @Prop({
    type: Number,
    default: 0,
  })
  projectId!: number
  public publicPath: string = publicPath

  public attributeTypeIcon: { [key in AttributeType]: string } = {
    [AttributeType.VARCHAR]: 'iconshujuleixing-zifu', // 字符串
    [AttributeType.DATE]: 'iconshujuleixing-riqi', // 日期
    [AttributeType.INT]: 'iconzhengshu1', // 整数
    [AttributeType.DECIMAL]: 'iconxiaoshu1', // 小数
    [AttributeType.TEXT]: 'iconshujuleixing-zifu', // 文本
    [AttributeType.JSON]: 'iconobject1', // JSON
    [AttributeType.ARRAY]: 'iconarray1', // 数组
  }

  // 当前图层所有属性列
  public layerTableColumns: any[] = []

  // 属性列表展示图层选中的数据源中的字段，默认展示第一图层的数据字段
  public get currentLayer() {
    return GisStore.selectLayer || GisStore.firstLayerOfList
  }

  @Watch('currentLayer.id', { immediate: true })
  public onSelectLayerId(id: number) {
    if (id) {
      this.getTableDetailByLayer()
    } else {
      this.layerTableColumns = []
    }
  }

  /**
   * 获取当前图层的所有属性列 （需要过滤）
   */
  public async getTableDetailByLayer() {
    if (!this.currentLayer) {
      return
    }
    const response: any = await GisStore.gisQueryTableColumns(
      this.currentLayer?.viewName
    )
    this.layerTableColumns = response.data?.result?.head
      ? response.data.result.head.filter(
          (column: any) => column.name !== 'geom' && column.name !== 'geom_4326'
        )
      : []
  }

  /**
   * 添加到属性标记
   * @param attribute 属性 { desc: "varchar", name: "NAME", type: 1}
   */
  public async addToTag(attribute: any) {
    // TODO tagType 需要断定，后面完善
    const attributeTagInfo: any = {
      ...attribute,
      tagType: 'detail', // 4种 color size label detail
      config: null, // 存储相关配置
      opacity: 1, // 整体透明度, 点线面
      borderColor: '#123456', // 点支持，
      borderOpacity: 1, // 点支持
    }
    GisStore.addAttributeTag(attributeTagInfo)
    await GisStore.gisSaveTabInfoWithLayer()
  }

  public menuAction($event: any, attribute: any) {
    const { key } = $event
    if (key === 'view-source-data') {
      if (!GisStore.selectLayer) {
        GisStore.setSelectLayer(this.currentLayer)
      }
      GisStore.setViewDataLayerTime()
      this.$nextTick(() => {
        GisStore.setSelectedColumns([attribute]) // 卡片
        GisStore.setTableSelectColumns([attribute]) // 数据表 - 列
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.gis-layer-management {
  height: 100%;
  position: relative;
  user-select: none;

  .module-disabled {
    background-color: #ededf4;
    cursor: not-allowed;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
  }

  // 头
  .header {
    box-sizing: content-box;
    height: 20px;
    line-height: 20px;
    //margin: 1
    padding: 12px 16px;
    width: 100%;

    .header-title {
      align-items: center;
      color: #b1b1b1;
      display: flex;
      justify-content: space-between;
      // 数据源 算子  icon
      .type-icon-name {
        align-items: center;
        display: flex;
        font-size: 20px;

        .header-name {
          color: #5d637e;
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 1px;
        }
      }
    }

    .name {
      color: #4b4b4b;
    }
  }

  // 属性
  .attribute-list {
    height: calc(100% - 44px);
    overflow-y: auto;

    .layer-attribute-item {
      align-items: center;
      cursor: pointer;
      display: flex;
      height: 34px;
      justify-content: space-between;
      line-height: 34px;
      padding: 0 8px;
      position: relative;
      width: 100%;

      .attribute-info {
        display: flex;
        width: 100%;

        .attribute-type-icon {
          font-size: 16px;
          height: 20px;
          margin-right: 6px;
          width: 20px;
        }

        .attribute-name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: calc(100% - 26px);
        }
      }

      // 添加到属性标记
      .attribute-add {
        display: none;
        height: 20px;
        line-height: 20px;
        text-align: center;
        width: 20px;
      }

      // 菜单
      .attribute-menu {
        display: none;
        height: 20px;
        line-height: 20px;
        text-align: center;
        width: 20px;
      }

      &:hover {
        background: rgba(103, 113, 252, 0.1);

        .attribute-info {
          width: calc(100% - 45px);
        }

        .attribute-add {
          display: inline-block;
        }

        .attribute-menu {
          display: inline-block;
        }
      }
    }

    .attribute-empty {
      padding: 24px;
      text-align: center;
      width: 100%;

      img {
        max-width: 200px;
        width: 100%;
      }

      div {
        font-size: 12px;
        margin-top: 12px;
        text-align: center;
      }
    }
  }
}
</style>
